<template>
    <div>
        <el-card class="!border-none mb-2" shadow="never">
            <div class="font-medium mb-2">平台服务费计算规则</div>
            <div class="txt">平台服务费 = 用户支付的渠道费 * 统计周期内累计渠道费对应的费率</div>
            <div class="txt">上限、下限金额校验：大于上限，以上限为准；小于下限，以下限为准；</div>
            <div class="txt">得出的数值，如果有小数的话做向下取整</div>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <!-- <div class="btn-flex mb-2">
                <el-button v-if="!isDisabled" type="primary" @click="onEdit()">修改</el-button>
                <el-button v-if="isDisabled" @click="()=>{isDisabled = false}">取消</el-button>
                <el-button v-if="isDisabled" type="primary">保存</el-button>
            </div> -->
            <el-table size="large" v-loading="loading" :data="lists">
                <el-table-column label="级数" type="index" min-width="80" />
                <el-table-column label="开始值" prop="min" min-width="80">
                    <template #default="{row,$index}">
                        <el-input
                            v-model="row.min"
                            placeholder=""
                            class="input-with-select"
                            :disabled="!row.isDisabled"
                            maxlength="8"
                            type="number"
                            @blur="onBlur('min', $index, $event)"
                            @input="onChange('min', $index, $event)"
                        >
                            <template #append>
                                <el-select v-model="row.min_has" placeholder="Select" style="width: 85px" :disabled="!row.isDisabled">
                                    <el-option label="含" :value="1" />
                                    <el-option label="不含" :value="0" />
                                </el-select>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="结束值" prop="max" min-width="80">
                    <template #default="{row, $index}">
                        <el-input
                            v-model="row.max"
                            placeholder=""
                            class="input-with-select"
                            :disabled="!row.isDisabled"
                            type="number"
                            maxlength="8"
                            @blur="onBlur('max', $index, $event)"
                            @input="onChange('max', $index, $event)"
                        >
                            <template #append>
                                <el-select v-model="row.max_has" placeholder="Select" style="width: 85px" :disabled="!row.isDisabled">
                                    <el-option label="含" :value="1" />
                                    <el-option label="不含" :value="0" />
                                </el-select>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="费率（%）" prop="ratio" min-width="80">
                    <template #default="{row, $index}">
                        <el-input
                            v-model="row.ratio"
                            placeholder=""
                            class="input-with-select"
                            :disabled="!row.isDisabled"
                            type="number"
                            maxlength="3"
                             @blur="onBlur('ratio', $index, $event, 100)"
                             @input="onChange('ratio', $index, $event, 100)"
                        >
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button type="danger" v-perms="['user.money/commissionDel']" :disabled="!scope.row.isDisabled" @click.prevent="onDel(scope.$index, scope.row)">删除</el-button>
                        <!-- <el-button v-if="!scope.row.isDisabled" type="primary" @click="onEdit(scope.row, scope.$index)">修改</el-button> -->
                        <el-button v-if="!scope.row.isDisabled" type="primary" @click="()=>{scope.row.isDisabled = true}">修改</el-button>
                        <el-button v-if="scope.row.isDisabled" @click="()=>{scope.row.isDisabled = false}">取消</el-button>
                        <el-button v-if="scope.row.isDisabled" type="primary" v-perms="['user.money/commissionChange']" @click="onSave(scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="middle">
                <el-button class="mt-4" type="primary" plain @click="onAddItem">添加</el-button>
            </div>
            
        </el-card>
    </div>
</template>
<script setup lang="ts">
    import { commissionList, commissionDel, commissionChange } from '@/api/finance';
    import { ElMessage } from 'element-plus'
    import feedback from '@/utils/feedback';
    const isDisabled = ref(false);
    const onEdit = (row:any, index: number) => {
        // isDisabled.value = true;
        row.isDisabled = !row.isDisabled;
        lists.value[index] = row;
    }
    const loading = ref(true)
    const lists:any = ref([])
    const getLists = async() => {
        const res = await commissionList({})
        console.log(res)
        loading.value = false
        res.map((item:any)=>{
            return item.isDisabled = false
        })
        lists.value = res;
    }
    const onDel = async (index: number, row: any) => {
        try{
            if (row.id) {
                const res = await commissionDel({id: row.id})
                console.log(res)
                getLists()
            } else {
                lists.value.splice(index, 1)
            }
        }catch(error){
            console.log(error)
        }
        console.log(index)
    }
    // 限制输入的值
    const onBlur = (txt: any, index: any,e: any, num:number = 99999999) => {
        console.log(txt)
        console.log(index)
        console.log(e.target.value)
        if (e.target.value > num) {
            lists.value[index][txt] = num
        } 
    }
    const onChange = (txt: any, index: any, e: any, num:number = 99999999) => {
        console.log(txt)
        console.log(index)
        console.log(e)
        if (e > num) {
            lists.value[index][txt] = num
        } 
    }
    const onSave = async (row:any) => {
        console.log(row)
        if (row.min === '') {
            ElMessage.error('请填写开始值')
            return false
        }
        if (row.max === '') {
            ElMessage.error('请填写结束值')
            return false
        }
        if (row.ratio === '') {
            ElMessage.error('请填写费率')
            return false
        }
        if (Number(row.min) >= Number(row.max)) {
            ElMessage.error('开始值不能大于或等于结束值')
            return false
        }
        console.log(row)
        let params = {
            id: row.id || 0,
            min: row.min,
            min_has: row.min_has,
            max: row.max,
            max_has: row.max_has,
            ratio: row.ratio
        }
        const res = await commissionChange(params)
        getLists()
    }
    const onAddItem = () => {
        lists.value.push({
            min: '',
            min_has: 1,
            max: '',
            max_has: 0,
            ratio: '',
            isDisabled: true
        })
    }
    getLists()
</script>
<style lang="scss" scoped>
.danger{
    font-size: 12px;
    color: #F56C6C;
}
.txt{
    font-size: 14px;
    // color: #F56C6C;
}
.btn-flex{
    display: flex;
    justify-content: flex-end;
}
.middle{
    display: flex;
    justify-content: center;
}
</style>